window.addEventListener("load", function () {
  // 动态渲染次数价格
  // 模拟获取后台数据
  let timesData = [
    { times: 4000, price: 1200, unitPrice: "0.3000" },
    { times: 8000, price: 2000, unitPrice: "0.2500" },
    { times: 40000, price: 8000, unitPrice: "0.2000" },
  ];
  // 获取节点
  timesData.forEach(function (v, i) {
    // 给li添加自定义属性存储总价和单价
    $(
      "#timesTab",
    ).innerHTML += ` <li data-price="${v.price}" data-unitprice="${v.unitPrice}">${v.times}次</li>`;
  });
  // 获取timesTab下li的节点
  const liNOde = $("#timesTab li");
  // 获取价格节点
  const priceNode = $("#price");

  // 默认给下标为1的li加上激活样式
  liNOde[1].classList.add("active");
  // 显示默认价格和单价
  priceNode.innerHTML = `<p><span>￥${liNOde[1].dataset.price}</span>(约${liNOde[1].dataset.unitprice}元/次),仅限企业实名购买</p>`;
  // 添加激活样式
  // 获取节点
  liNOde.forEach(function (v, i) {
    // 给每个节点绑定事件
    v.addEventListener("click", function () {
      // 给点击的元素加上激活样式
      if (i !== 0) {
        // 点击先清除所有激活样式
        liNOde.forEach(function (item) {
          item.classList.remove("active");
        });
        this.classList.add("active");
        // 动态显示价格和单价
        priceNode.innerHTML = `<p><span>￥${this.dataset.price}</span>(约${this.dataset.unitprice}元/次),仅限企业实名购买</p>`;
      }
    });
  });

  // 点击tab切换栏显示对应内容
  tabChange("#tabList li", "active", "#contentLt div", "on");


  // console.log($("#contentLt div"));
  //配置
  var config = {
    selector: "#bannerBg",
    vx: 4, //点x轴速度,正为右，负为左
    vy: 4, //点y轴速度
    height: 2, //点高宽，其实为正方形，所以不宜太大
    width: 2,
    count: 100, //点个数
    color: "#000", //点颜色
    stroke: "0,0,0", //线条颜色
    dist: 6000, //点吸附距离
    e_dist: 2000, //鼠标吸附加速距离
    max_conn: 10, //点到点最大连接数
  };
  //调用
  CanvasParticle(config);
});
